import index from '@/layouts';
import { Space, Table, Tag, Button, Form, Input, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { userAllApi } from '../../apis/menuApi';
import { DataType } from '../../types/user';

const { Option } = Select;

export default function user() {
  const [data, setData] = useState([]);

  //调用生命周期
  useEffect(() => {
    userData();
  }, []);

  //发送请求获取菜单数据
  const userData = async () => {
    const res = await userAllApi();
    res.rows.map((item: any, index: number) => {
      return (item.key = item.userId);
    });
    // console.log(res.rows);
    setData(res.rows);
  };

  // 表格单选框
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.username === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      align: 'center',
      width: '100px',
      sorter: true,
    },
    {
      title: '性别',
      dataIndex: 'ssex',
      key: 'ssex',
      align: 'center',
      width: '100px',
      render: (params) => {
        return params === '0'
          ? '男'
          : params === '1'
          ? '女'
          : params === '2'
          ? '保密'
          : '';
      },
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      align: 'center',
      width: '200px ',
    },
    {
      title: '部门',
      dataIndex: 'deptName',
      key: 'deptName',
      align: 'center',
      width: '100px',
    },
    {
      title: '电话',
      dataIndex: 'mobile',
      key: 'mobile',
      align: 'center',
      width: '200px',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      width: '100px',
      render: (params) => {
        return params == 1 ? (
          <Tag color="cyan">有效</Tag>
        ) : (
          <Tag color="volcano">锁定</Tag>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: '200px',
    },
    {
      title: '操作',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: '100px',
    },
  ];

  return (
    <div>
      <div>
        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }}>
          <Form.Item name="note" label="用户名">
            <Input />
          </Form.Item>
          <Form.Item name="gender" label="部门">
            <Select>
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>
        </Form>
      </div>
      <Table
        rowSelection={{
          type: 'checkbox',
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
}
